<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width='550px' append-to-body  :fullscreen = 'Global.currentDevice'>
        
        <el-tree  :data="treedata"
                  show-checkbox  check-strictly
                  node-key="code"
                  default-expand-all
                  :default-checked-keys='defaultCheckedId'
                  :expand-on-click-node='false'
                  :check-on-click-node="true"
                  
                  @node-click="nodeClick"
                  @check ='checkNode'
                 ref="tree">
              <span class="custom-tree-node" slot-scope="{ node, data }"  v-if='data.useable == 1'>
                    <span>{{ data.name }}</span>
              </span>
        </el-tree>
        

        <div slot="footer" class="dialog-footer">
              <el-button @click="dialogProps.visible = false">取 消</el-button>
              <el-button type="primary" @click="submit('form')">确 定</el-button>
        </div>
  </el-dialog>
</template>

<script charset="utf-8" type="text/javascript">
  //接口
import { listUser,listDepart }  from  '@/api/user/index'
import { pointTouser }  from  '@/api/examine/index'



export default {
  name: 'relatedUserEdit',
  props:{ 
      
      type:{ //审批类型
          type:String,
          default:''
      },
      status:{ //项目状态 用于判断 哪个角色的指派
          type:Number,
          default:null
      },
      from:{  //从哪个组件点击进入  Exa_detail
          type:String,
          default:''
      }
  },
  data() {
    
    return {
      loading: false,
      //dialogo基本信息  显示隐藏状态  title 
      dialogProps: {
        visible: false,
        action: '',
        title: '选择相关人员'
      },
      // treedata: JSON.parse(JSON.stringify(data)),
      treedata:[],
      defaultCheckedId:[],
      checkedId:null,
      checkedNode:null,
      //绑定form
      form:{

      },
      currentExaCode:'',//当前申请code
      
      // define default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
              id: 'aa',
              label: 'aa',
            }, {
              id: 'ab',
              label: 'ab',
            } ],
          }, 
        {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],

        bumendata:[],
        op_data:[],
    }
  },
  created(){
    // let arr = [
    //   {code:1,name:'小白'},
    //   {code:1,name:'小米'},
    //   {code:2,name:'小月'},
    //   {code:2,name:'小水'},
    //   {code:2,name:'小光'},
    //   {code:3,name:'小红'},
    //   {code:3,name:'小蓝'},
    // ]
    // let re = []
    // arr.forEach((item,ind)=>{
    //   let arr1 = []
    //   arr.forEach((it,index)=>{
        
    //         console.log(ind,index)
    //         if(item.code == it.code){
    //             arr1.push(it,index)
    //             console.log(it,index)
    //             // if(ind!=index){ //不能这时候删除，也不能不删除
    //             //     arr.splice(index,1)
    //             // }
    //         }
    //         console.log(arr1)
        
    //   })
    //   re.push(arr1)
      
    // })
    // console.log(re)
    this.pageInit()
    // this.treeInit() //部门树 init
  },
  methods: {
    async pageInit(){
         let that =this
         //用户列表
         await listUser({limit: 100,currentPage:1}).then(res=>{
            if(res.data.flag == true){
                let data =  res.data.dataList
                /*去除开发部和系统管理员*/
                data.forEach((item)=>{
                  if(item.officeName != '技术部'  &&  item.officeCode != 'root'){
                    this.treedata.push(item)
                  }
                })
            }
         }).catch(error => {
             that.outputError(error)
         }) 

    },
    /*将用户数组转化成用户树*/
    changeTree(data){
          /**
           * 该方法用于将有父子关系的数组转换成树形结构的数组
           * 接收一个具有父子关系的数组作为参数
           * 返回一个树形结构的数组
           */
          
            //没有父节点的数据
            let parents = data.filter(value => value.officeCode == '' || value.officeCode == null)
           
            //有父节点的数据
            let children = data.filter(value => value.officeCode !== '' && value.officeCode != null)
           
            //定义转换方法的具体实现
            let translator = (parents, children) => {
              //遍历父节点数据
              parents.forEach((parent) => {
                //遍历子节点数据
                children.forEach((current, index) => {
                  console.log(current)
                  //此时找到父节点对应的一个子节点
                  if (current.officeCode  === parent.code) {
                    //对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
                    let temp = JSON.parse(JSON.stringify(children))
                    //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
                    temp.splice(index, 1)
                    //让当前子节点作为唯一的父节点，去递归查找其对应的子节点

                    translator([current], temp)
                    //把找到子节点放入父节点的children属性中
                    typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
                  }
                }
                )
              }
              )
            }
           
            //调用转换方法
            translator(parents, children)
           
            //返回最终的结果
            // return parents
            console.log(parents)
          
    },

    //将用户分到各部门的下面去
    //部门树 init
    treeInit(){
        let that=this

        /*请求部门树list  编辑新增  会请求多次*/
        listDepart({ limit: 1000,currentPage:1,}).then(res=>{
            
            this.departList = res.data.dataList
            this.bumendata = this.formTreeTest(this.departList)//写成通用的，因为添加部门时，需要添加用户 ，用户需要上级部门展示
            // console.log(this.bumendata)
            
        }).catch(error => {

            that.outputError(error)
        })
    },
    
    //tree点击节点的回调函数  
    nodeClick(data,checked,node){
        // console.log(data,node)
        if(this.from == 'Exa_detail'){
            this.checkedId = data.code
            this.checkedNode=data.name
            this.$refs.tree.setCheckedNodes([ data]);
        }
     },
     //当复选框被点击的时候触发  因为只控制了节点点击，所以当单独点击复选框的时候它会多选，需要一起控制
    checkNode(data,node){
        if(this.from == 'Exa_detail'){
          this.checkedId = data.code
          this.checkedNode=data.name
          this.$refs.tree.setCheckedNodes([data]);
        }
    },
     getCheckedNodes(a,b){
        console.log(a,b)
     },
    submit(formName) {
      //得到所有选中的节点
      let data=this.$refs.tree.getCheckedNodes()
      if(this.from == 'Exa_detail'){
          let url='';
          if(this.type == 1){
              if(this.status == 1){
                  url='/op/project_req/department_principal_assign'//1.部门负责人指派
              }
              if(this.status == 3){
                  url='/op/project_req/compliance_principal_assign'//1.合规负责人指派审批人
              }
              if(this.status == 5){
                  url='/op/project_req/executive_general_manager_assign'//1.执行总经理指派审批人
              }
          }

          if(this.type == 2){
              if(this.status == 1){
                  url = '/op/project_meeting_req/department_principal_assign'
              }
              if(this.status == 3){
                  url= '/op/project_meeting_req/compliance_principal_assign'
              }
              if(this.status == 5){
                  url= '/op/project_meeting_req/executive_general_manager_assign'
              }
          }

          if(this.type == 3){
              if(this.status == 1){
                  url= '/op/product_agreement_stamp_req/department_principal_assign'//部门负责人指派审批人
              }
              if(this.status == 3){
                  url='/op/product_agreement_stamp_req/compliance_principal_assign' //合规负责人指派审批人
              }
              if(this.status == 5){
                  url= '/op/product_agreement_stamp_req/executive_general_manager_assign' //执行总经理指派审批人
              }
          }

          if(this.type == 4){
              if(this.status == 1){
                  url= '/op/product_release_req/department_principal_assign'//部门负责人指派审批人
              }
              if(this.status == 3){
                  url= '/op/product_release_req/compliance_principal_assign'//合规负责人指派审批人
              }
              if(this.status == 5){
                  url= '/op/product_release_req/executive_general_manager_assign'
              }
          }
          // console.log(this.currentExaCode,data[0].code)
          pointTouser(url,this.currentExaCode,data[0].code).then(res=>{
              if(res.data.flag == true ){
                  this.$message({type:'success',message:res.data.msg})
                  this.$emit('save-finished',data)
                  this.dialogProps.visible=false
                  this.$router.push({path:'/homework'})
              }
          })
          .catch(error=>{
              console.log(error)
          })
      }
      else{
          this.$emit('save-finished',data)
          this.dialogProps.visible=false
      }
      
    },
    
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openDialog', function(data) {
        // console.log(data)
        this.dialogProps.visible = true
        this.defaultCheckedId=[]
        console.log(data)
        if(this.from == 'Exa_detail'){
              this.currentExaCode = data

        }
        else if(data){
          
              if(data.length == 0){
                
                  //此时树还没有被渲染，所以不能直接设置某个节点的状态；将这个值存在数据中，当树渲染数据时，它会自动跟进去
                  this.defaultCheckedId=[]
                  // if(this.$refs.tree){
                    
                  //     this.$refs.tree.setCheckedNodes();
                  // }
                  
              }
              else{
                  // this.$refs.tree.setCheckedNodes(data);
                  this.defaultCheckedId=[]

                  let arr = [],str = ''
                  data.forEach((item)=>{
                     str +=item.code+','
                  })
                  arr = str.slice(0,-1).split(',')
                  this.defaultCheckedId=arr
                  // console.log(this.defaultCheckedId,this.$refs.tree.getCheckedNodes())
                  // this.getCheckedNodes()
              }
        }
        
        
      })
      
    })
  },
  updated(){
    
  },
  
  components:{
         
  }
}
</script>

<style  scoped>
</style>


